<template>
  <div class="dashboard-container">
    <aside class="aside-style">
      <el-row>
        <el-col :span="9">
          <el-date-picker
            v-model="value2"
            type="daterange"
            size="small"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd HH:mm:ss"
            @change="dateChange"
          />

        </el-col>
      </el-row>
    </aside>
    <el-table
      :data="list"
      border
      style="width: 100%;margin-top: 20px;"
      size="small"
      :height="getTabHeight"
    >
      <el-table-column
        prop="nick_name"
        label="昵称"
        width="180"
      />
      <el-table-column
        prop="gender"
        label="性别"
        width="180"
      />
      <el-table-column
        prop="province"
        label="省"
      />
      <el-table-column
        prop="city"
        label="市"
      />
      <el-table-column
        prop="create_time"
        label="创建时间"
      />
    </el-table>
    <pagination :total="total" :limit="limit" @pagination="paginationFun" />
  </div>
</template>

<script>
import pagination from '@/components/Pagination'
import { getUserListApi } from '@/api/main'
export default {
  components: {
    pagination
  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      value2: '',
      start_time: '',
      end_time: '',
      limit: 10,
      p: 1,
      total: 0,
      list: []
    }
  },
  computed: {
    getTabHeight() {
      const screenHeight = window.innerHeight
      return screenHeight - 250
    }
  },
  created() {
    this.getUserList()
  },
  methods: {
    dateChange() {
      console.log(this.value2)
      if (this.value2) {
        this.start_time = this.value2[0]
        this.end_time = this.value2[1]
      } else {
        this.start_time = ''
        this.end_time = ''
      }
      this.getUserList()
    },
    getUserList() {
      const data = {
        p: this.p,
        limit: this.limit,
        start_time: this.start_time,
        end_time: this.end_time
      }
      getUserListApi(data).then(res => {
        console.log(res)
        this.total = Number(res.count)
        this.list = res.list
      })
    },
    paginationFun(val) {
      this.p = val.page
      this.limit = val.limit
      this.getUserList()
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
    &-container {
        margin: 30px;
    }
    &-text {
        font-size: 30px;
        line-height: 46px;
    }
}
</style>
